<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;}
    li{
        
    }
    .nav-top{
       height: 50px;
       background-color: white;
       position: relative;
       text-decoration: none;
   }
   .nav-left{
      width: 350px;
      height: 50px;
      position: absolute;
      left: 0;
      top: 0%;
      text-decoration: none;
  }
   .nav-right{
      width: 200px;
      height: 50px;
      text-decoration: none;
      position: absolute;
      right: 0;
      top: 0;
  }
    ul{
       list-style: none;
       overflow: hidden;
       margin-top: 10px;
       
       
   }
  .nav-top li{
       float: left;
       width: 50px;
       text-align: center;
       
   
   }
   li:hover{
       cursor: pointer;
       color:rgb(94, 161, 238);
       background-color: gray;
   }
  
   .list-logo img{
       width: 20px;
       height: 10px;
       margin-top:1px;
      margin-bottom: 1px;
   }
   
   .content{
       width: 594px;
       height: 660px;
       text-decoration: none;
    
   }
   .center{
       margin-left: auto;
       margin-right: auto;
   }
   .wrap-logo{
       text-align: center;
   }
   .wrap-logo img{
       width:270px;
   }
   .camera img{
       width: 30px;
       height: 30px;
       background-size:30px;
       position: absolute;
       right: 80px;
       top: 50%;
       margin-top: -13px;
   }
   .bottom-logo img{
       width: 30px;
       height: 30px;
       background-size:30px;
       position: absolute;
       right: 16px;
       top: 50%;
       margin-top: -60px;
   }
    .number img{
        width:20px ;
       height: 20px;
       background-size:15px;
       position: absolute;
       margin-top:0px ;
       margin-right: 5px;
       
    }
   img:hover{
    cursor: pointer;
    color:rgb(17, 107, 224);
   }
   .ist{
       width: 40px;
       border-radius: 15px;
       color: white;
       background-color:blue;
   }
   button{
       width: 72px;
       height: 46px;
       color: white;
       background-color:blue;
       background-size: 20px;
       border-radius: 15px;
       text-indent: 15px;
       background-position-y: center;
       position: absolute;
       outline: none;
       border: none;
       right: 0;
       top: 0;
       left: 88%;
       text-align: center;
   }
   button:hover{
       background-color:rgb(94, 161, 238);
   }
   input{
       position: absolute;
       left: 0px;
       top: 0;
       padding: 0;
       border: none;
       outline: none;
       height: 46px;
       
        
   }
   .input{
       padding-left: 46px;
   }
   .search{
       position:relative;
       width: 600px;
       height: 46px;
       
       border: 1px solid rgb(158, 214, 252);
       border-radius: 15px;
       /* 溢出问题 */
       overflow: hidden;
      
       margin-left: auto;
       margin-right: auto;
       
       top: 0;
   }
   .content-list{
       overflow: hidden;
       
   }
   .content-list>div{
       width:50%;
       float: left;
       background-color:white;
   }
   ul{
      list-style: none;
       overflow: hidden;
       margin-top: 20px;
       margin-bottom: 40px;
  }
  
  .list-left li{
       float:left;
       letter-spacing: 4px;
       line-height: 20px;
       /* text-align: center; */
       margin-left: auto;
       margin-right: auto;
       margin-top: 20px;

  } 
  .list-right,.list-logo li{
       float:right;
       letter-spacing: 4px;
       line-height: 30px;
      
       margin-left: auto;
       margin-right:auto;
       margin-top: 20px;
  } 
  .content-list li{
       overflow: hidden;
  }
  .nav-bottom{
       height: 50px;
       background-color:white;
       position: relative;
       position: fixed;
       bottom: 0;
       width: 100%;
       text-decoration: none;
   }
   .bottom-left{
      
      height: 50px;
      
      position: absolute;
      
      left: 0;
      bottom: 0;
  }
   .bottom-right{
     
      height: 50px;
      
      position: absolute;
     
      right: 0;
      bottom: 0;
  }
    ul{
       list-style: none;
       overflow: hidden;
       margin-top: 10px;
       
   }
  .nav-bottom li{
       float: left;
       margin-left: 20px;
       text-align: center;
   }
   a{
       color: black;
   }
   a:hover{
       cursor: pointer;
       color:rgb(73, 148, 245);
   }
   .content-list span{
       width: 30px;
       height: 15px;
       font-size:10px;
       color: white;
      background-color: tomato;
  }
</style>
</head>
<body>
    <div class="nav-top">
        <div class="nav-left">
           <ul>
                <li><a href="#">新闻</a></li>
                <li><a href="#">hao123</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">贴吧</a></li>
                <li><a href="#">学术</a></li>
                <li><a href="#">更多</a></li>
           </ul>
        </div>
        <div class="nav-right">
            <ul>
                <li><a href="#">设置</a></li>
                <li><a href="#" class="ist">登陆</a></li>
           </ul>
        </div>
    </div>
    <div class="content center">
        <p class="wrap-logo"><img src="images\02.png" alt=""></p>
           <div class="search">
             <input class="input" type="text">
             <span class="camera"><img src="images\相机.png"alt=""></span>
             <button >百度一下</button>
            </div>
            <div class="content-list">
                <div class="list-left">
                    <ul>
                        <li>百度热榜</li>
                        <li>
                            <p class="number"><img src="images\1.png"alt=""></p>
                            <a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%A4%96%E4%BA%A4%E9%83%A8%E5%9B%9E%E5%BA%94%E8%8F%85%E4%B9%89%E4%BC%9F%E5%BD%93%E9%80%89%E6%97%A5%E6%9C%AC%E9%A6%96%E7%9B%B8&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            外交部回应菅义伟当选日本首相</a>
                        </li>
                        <li>
                            <p class="number"><img src="images\2.png"alt=""></p>
                            <a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%91%9E%E4%B8%BD%E5%B7%B2%E5%AE%8C%E6%88%90%E6%A0%B8%E9%85%B8%E6%A3%80%E6%B5%8B%E5%85%A8%E9%83%A8%E4%B8%BA%E9%98%B4%E6%80%A7&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            瑞丽已完成核酸检测全部为阴性</a></li>
                        <li>
                            <p class="number"><img src="images\3.png"alt=""></p>
                            <a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E8%80%81%E5%A5%B6%E5%A5%B6%E5%9D%90%E5%85%AC%E4%BA%A4%E5%AF%B9%E7%9D%80%E5%8F%B8%E6%9C%BA%E7%9A%84%E5%A4%B4%E6%89%AB%E7%A0%81&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            老奶奶坐公交对着司机的头扫码</a></li>
                    </ul>
                </div>
                <div class="list-right">
                    <ul>
                        <li class="list-logo"><img src="images\换一换.png"alt="">换一换</li>
                        <li>
                            <span class="number"><img src="images\4.png"alt=""></span>
                            <a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E9%BB%84%E9%B8%BF%E5%8D%87%E5%8E%BB%E4%B8%96&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            黄鸿升去世</a><span>热</span></li>
                        <li>
                            <span class="number"><img src="images\5.png"alt=""></span>
                            <a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%A4%A7%E4%B8%80%E6%96%B0%E7%94%9F%E8%B6%85%E4%B8%80%E6%9C%AC%E7%BA%BF118%E5%88%86%E5%8F%AA%E6%8A%A5%E8%80%83%E5%8F%A4&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            大一新生超一本线118分只报考古</a></li>
                        <li>
                            <span class="number"><img src="images\6.png"alt=""></span>
                            <a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%B1%B1%E7%81%AB%E4%B8%AD%E7%BE%8E%E5%9B%BD%E6%B0%91%E4%BC%97%E8%B7%B3%E6%B9%96%E4%BF%9D%E5%91%BD&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            山火中美国民众跳湖保命</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="nav-bottom">
            <p class="bottom-logo"><img src="images\二维码.png" alt=""></p>
            <div class="bottom-left">
               <ul>
                    <li><a href="#">设为首页</a></li>
                    <li><a href="#">关于百度</a></li>
                    <li><a href="#">About Baidu</a></li>
                    <li><a href="#">百度营销</a></li>
                    <li><a href="#">使用百度前必读</a></li>
                    <li><a href="#">意见反馈</a></li>
                    <li><a href="#">帮助中心</a></li>
               </ul>
            </div>
            <div class="bottom-right">
                <ul>
                    <li><a href="#">@2020 baidu</a></li>
                    <li><a href="#">(京)-经营性-2017-0020</a></li>
                    <li><a href="#">京公网安备11000002000001</a></li>
                    <li><a href="#">(京ICP证0301713号</a></li>
               </ul>
            </div>
        </div>
</body>
</html>